<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 用户选择喜欢的，把用户选中的栏目信息在下面列表显示出来 -->
     <div id="app">
        <p>请选择你喜欢的专栏</p>
        <div v-for="(item) in columnList" class="one">
            <input type="checkbox" :value="item" v-model="newList">{{item}}
        </div>
        <ul v-for="(item) in newList">
            <li>{{item}}</li>
        </ul>
     </div>
     <script src="../vue.js"></script>
     <script>
        const app = new Vue({
            el:'#app',
            data:{
                newList:[],
                columnList:['科幻','生活','音乐','体育','动漫','游戏','军事','娱乐']
            }
        })
     </script>
</body>
</html>